<template>
  <div class="g-tree" v-loading="getLoading()">
    <template v-if="isShowHeader">
      <div class="header">
        <div>
          <slot name="headerTitle">树</slot>
        </div>
        <div v-if="true">
          <slot name="headerExtra"></slot>
        </div>
      </div>
      <a-divider style="margin: 12px 0" />
    </template>
    <a-tree
      v-if="hasEmpty"
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      :tree-data="treeDataList"
      v-bind="getProps()"
      @check="check"
      @dragend="dragend"
      @dragenter="dragenter"
      @dragleave="dragleave"
      @dragover="dragover"
      @dragstart="dragstart"
      @drop="drop"
      @expand="expand"
      @load="load"
      @rightClick="rightClick"
      @select="select"
    >
      <template #icon="{ slots, children }">
        <slot name="icon" :slots="slots">
          <svg v-if="!!slots && slots.icon != 'file'" class="icon" aria-hidden="true">
            <use xlink:href="#gctzuzhijiegou"></use>
          </svg>
          <svg v-else class="icon" aria-hidden="true">
            <use xlink:href="#gctzuzhijiegouzicengji"></use>
          </svg>
        </slot>
      </template>
      <template #title="{ title, key }">
        <slot name="title" :title="title" :key="key"> {{ title }}</slot>
      </template>
    </a-tree>
    <a-empty class="in-middle" v-else />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './mixins/index-mixin';
  export default defineComponent({
    name: 'g-tree',
    mixins: [IndexMixin],
  });
</script>
<style lang="less" scoped>
  @import './style/index.less';
</style>
